<template>
  <main>
    <div class="container">
      <!-- 标题部分 -->
      <h1>欢迎使用 Qing 代办事项！</h1>

      <!-- 添加代办部分 -->
      <todo-add :todos="todos" @add-todo="addTodo"/>

      <!-- 筛选器部分 -->
      <todo-filter :selected="filter" @change-filter="filter = $event"/>

      <!-- todo-list 列表 -->
      <todo-list :todos="filteredTodos"/>
    </div>
  </main>
</template>

<script>
import todoAdd from './components/content/todo_add/todo_add.vue'
import todoFilter from './components/content/todo_filter/todo_filter.vue'
import todoList from './components/content/todo_list/todo_list.vue'

import useTodos from './composables/useTodos'
import useFilteredTodos from './composables/useFilteredTodos'

export default {
  name: 'App',
  components: {
    todoAdd,
    todoFilter,
    todoList
  },
  setup() {
    const { todos, addTodo } = useTodos();
    const { filter, filteredTodos } = useFilteredTodos(todos)

    return {
      todos, // 变量：数组类型，保存所有代办状态
      addTodo, // 方法：用于添加新的代办 说明：由子组件 todo-add 触发该事件，并传入新的 todo 代办内容
      filter, // 变量：String 类型，保存子组件 todo_filter 中选中的状态，例如：all
      filteredTodos, // 方法：根据 filter 的值，来筛选 todos 中相应的代办，并保存下来
    }
  }
}
</script>

<style>
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: Helvetica, "PingFang SC", "Microsoft Yahei", sans-serif;
  }

  /* 整个页面 */
  main {
    width: 100vw;
    min-height: 100vh;

    display: grid;
    justify-items: center;
    align-items: center;

    background-color: rgb(203, 210, 240);
  }

  .container {
    width: 60%;
    max-width: 400px;

    padding: 48px 28px;
    border-radius: 24px;

    box-shadow: 0 0 24px rgba(0, 0, 0, 0.15);
    background-color: rgb(245, 246, 252);
    caret-color: transparent; /* 去除光标颜色 */
  }

  /* 标题部分 */
  h1 {
    margin: 24px 0;
    color: #414873;
    font-size: 28px;
  }
</style>
